<template>
	<view class="book">{{learnbook}}</view>
	<view class="study" style="height: 500px;width:100%;">
		<ul class="answerList">
			<li v-for="(item,index) in words" :key="item.id">
				<view v-show="Num -1==index">
					<p>{{item.word}}</p>
					<p>{{item.pronounce}}</p>
					<p>{{item.paraphrase}}</p>
				</view>
			</li>
		</ul>
		<view class="Progress">当前学习进度{{Num}}/{{planNum}}</view>
	</view>
	<view class="tool">
		<button class="updownsay" @click="before">before</button>
		<button class="updownsay" @click="pronounce">发音</button>
		<button class="updownsay" @click="next">next</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				learnbook: "",
				Num: 1,
				planNum: 0,
				words:[]
			}
		},
		onLoad(e) {
			this.planNum = e.planNum;
			this.learnbook = e.learnbook;
			this.getWords(3,this.planNum);
		},
		methods: {
			before() {
				if (this.Num > 1) {
					this.Num -= 1;
				}
			},
			pronounce() {
				let word = this.words[this.Num - 1].word;
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src =
					'http://dict.youdao.com/dictvoice?type=0&audio=' + word;
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			next() {
				if (this.Num < this.planNum) {
					this.Num += 1;
				}
			},
			getWords(id,planNum){
				let _this = this;
				this.$Api.getWrods({gradeId:id,planNum:planNum}).then(res=>{
					_this.words = res.data.data.Words;
				})
			}
		}
	}
</script>

<style>
	.study {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		flex-direction: column;
	}

	.book {
		height: 65px;
		width: 100%;
		background-color: #21252b;
		color: #ffffff;
		text-align: center;
		line-height: 65px;
	}

	.word {
		height: 400px;
		width: 100%;
		text-align: center;
		line-height: 400px;
	}

	.Progress {
		height: 35px;
		width: 70%;
		background-color: coral;
		text-align: center;
		line-height: 35px;
	}

	.tool {
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		height: 100px;
		width: 100%;
	}

	.updownsay {
		height: 70px;
		width: 30%;
		background-color: #282c35;
		color: #ffffff;
		line-height: 70px;
	}
	
	.word_view{
		height: 100px;
		width: 100%;
		line-height: 200px;
		text-align: center;
	}
</style>